/**
* @description: 标准化作业--执行查看
* @author: wqn
* @data:2023年6月12日
* @remark:
**/
<template>
	<view class="execution">
		<nav-bar title="执行查看" @goBack="goBack"></nav-bar>
		<view class="main">
			<!--预控定级-->
			<view class="precontrol common">
				<view class="level">
					<ul>
						<!-- <img src="../../../static/standardizedOperationImg/zxckBlue.png" class="icon"> -->
						<li>
							<text class="bold">预控等级：<span>{{ grade }}</span></text>
						</li>
						<li>
							<img src="../../../static/standardizedOperationImg/zxckGreen.png" class="icon">
							<!-- <p style="background: #4cd964"></p> -->
						</li>
						<li>
							<text>标准指标</text>
						</li>
						<li>
							<img src="../../../static/standardizedOperationImg/zxckRed.png" class="icon">
							<!-- <p style="background: #FF4355"></p> -->
						</li>
						<li>
							<text>非标指标</text>
						</li>
					</ul>
				</view>
				<view class="notice">
					<text>注：绿色代表标准指标，即：该勘察内容对应的勘察对象均为标准指标
						<br>
						<span>红色代表非标准指标，即：该勘察内容对应的勘察对象中，至少有一项为非标准指标</span></text>
				</view>
			</view>

			<!--循环的列表-->
			<view class="execution-contnet" ref="testEx">
				<van-collapse v-model="activeNames" @change="changeScrollTop" accordion>
					<van-collapse-item :ref="'execution'+index" v-if="selectedTitle" :name="index" class="comment"
						v-for="(item,index) in selectedTitle" :key="index">
						<template #title>
							<!--        列表标题-->
							<view class="select">
								<img src="../../../static/standardizedOperationImg/zxckRed.png" class="icon"
									v-if="item.isStandard === 1">
								<img src="../../../static/standardizedOperationImg/zxckGreen.png" class="icon" v-else>
								<!-- <text :class="item.isStandard === 1 ? '' : 'active'">{{ `${item.surveyContent} (${item.surveyLevel}级)`}}</text> -->
								<text>{{ `${item.surveyContent} (${item.surveyLevel}级)`}}</text>
							</view>
						</template>
						<!--列表内容-->
						<view>
							<!--等级-->
							<view class="result">
								<ul>
									<li>标准结果：<span>{{ item.standardResult }}</span></li>
									<li>等级：<span>{{ item.surveyLevel }}</span></li>
								</ul>
								<view class="content">
									<text>风险点：{{ item.pointRisks }}</text>
									<text>
										现场预控技术措施：{{ item.technicalMeasures }}
									</text>
								</view>
							</view>
							<!--子级-->
							<view class="number" v-for="(item,index) in opticalCable[index]" :key="index">
								<view class="number-top">
									<view class="circle" :content="index + 1">
										{{ item.surveyObj }}
									</view>
									<van-radio-group v-model="(item.isStandard).toString()" direction="horizontal"
										disabled>
										<van-radio name="0">
											标准
											<template #icon="props">
												<img class="img-icon"
													:src="props.checked ? activeIcon : inactiveIcon" />
											</template>
										</van-radio>
										<van-radio name="1">
											非标
											<template #icon="props">
												<img class="img-icon"
													:src="props.checked ? activeIcon : inactiveIcon" />
											</template>
										</van-radio>
									</van-radio-group>
								</view>
								<view class="number-bottom">
									<text>现场照片：<span>(最多上传3张)</span></text>
									<ul>
										<li v-for="(fileItem,index) in item.file.slice(0,3)" :key="index"
											@click="popImg(item.file)">
											<img style="width: 80px;height: 80px;" :src="baseUrl + fileItem.filePath">
										</li>
									</ul>
								</view>
								<!--            现场落地情况说明-->
								<view class="Instructions" v-show="item.isStandard">
									<text>现场落地情况说明</text>
									<textarea id="area" placeholder="请输入" :value="item.situationDescription"
										disabled></textarea>
								</view>
							</view>
						</view>
					</van-collapse-item>
				</van-collapse>
			</view>
		</view>
		<van-popup class="van-preview-wrap" v-model="showPreview" @click="showPreview = false">
			<van-swipe>
				<div v-for="(image, index) in fileList" :key="index">
					<van-swipe-item v-if="image" style="text-align: center;">
						<img :src="baseUrl + image.filePath" />
					</van-swipe-item>
				</div>
			</van-swipe>
		</van-popup>
	</view>
</template>

<script>
	import navBar from "../common/navBar.vue"
	import baseConfig from "../../../common/config";

	let config = {}
	baseConfig.getOptions.then(res => {
		config = res
	})

	import {
		mapGetters
	} from "vuex";

	export default {
		name: "executionView",
		components: {
			navBar
		},
		data() {
			return {
				baseUrl: '',
				file: [{}],
				currentIndex: null,
				// 父级数据
				selectedTitle: [],
				// 预控定级的等级
				grade: '',
				// 子级数据
				opticalCable: [],
				// 标准 选中图表
				activeIcon: require('../../../static/img/wxActive.png'),
				// 非标 选中图表
				inactiveIcon: require('../../../static/img/wx.png'),
				fileList: [], //图片预览信息
				showPreview: false, //图片预览
				activeNames: '',
				height: 0,//移动的单个盒子的offsetTop距离
				index:0
			}
		},
		computed: {
			...mapGetters(["userData"])
		},
		onLoad(option) {
			this.work = option;
			this.baseUrl = config.firstUrl
			// this.baseUrl = `http://${this.$apiRequest.bzhzyApi.fileUrl}`
			this.getExecuteViewData()
		},
		beforeUpdate() {
			//获取需要移动的单个盒子的offsetTop距离 只取一次
			this.$nextTick(function() {
				if (this.$refs['execution1'] && this.height == 0) {
					this.height = this.$refs['execution1'][0].$el.offsetTop					
				}
			})
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			changeScrollTop(data) {
				this.$nextTick(function() {
					this.index = data
					//计算需要移动的距离，
					// if (data > 0) {
						this.$refs['testEx'].$el.scrollTop = this.height * data
					// }
				})
			},
			getRefs() {
				let that = this
				return new Promise((resolve, reject) => {
					resolve(that.$refs)
				})
			},
			unFold(index) {
				this.currentIndex = this.currentIndex === index ? null : index;
			},
			//   获取执行查看数据
			getExecuteViewData() {
				let params = {
					userId: this.userData.userId,
					workPlanId: this.work.id
				}
				this.$apiRequest.bzhzyApi.getSurverExecutionInfoDetails(params).then(res => {
					this.grade = res.data.surveyLevel;
					this.selectedTitle = res.data.list;
					for (let i = 0; i < res.data.list.length; i++) {
						this.opticalCable[i] = res.data.list[i].child;
					}
				})
			},
			popImg(filePath) {
				this.showPreview = true
				this.fileList = filePath
			}
		},
	}
</script>

<style lang="scss" scoped>
	.execution {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		background: #F2F6FA;
		overflow: hidden;

		.main {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding: px2vw(30) px2vw(30) 0;
			overflow: hidden;


			.icon {
				width: 22px;
				height: 22px;
			}

			.common {
				border-radius: px2vw(20);
				background: #FFFFFF;
				margin-bottom: px2vw(30);
			}

			.precontrol {
				height: px2vw(530);
				overflow: hidden;

				.level {
					ul {
						display: flex;
						justify-content: space-around;
						align-items: center;
						margin: px2vw(50) px2vw(60) px2vw(30) px2vw(50);

						li {
							p {
								width: px2vw(60);
								height: px2vw(36);
								border-radius: px2vw(4);
							}

							text {
								font-size: px2vw(38);
								color: #666666;
							}

							.bold {
								font-size: px2vw(42);
								font-weight: bold;

								span {
									color: #417ADC;
								}
							}
						}
					}
				}

				.notice {
					width: px2vw(920);
					height: px2vw(330);
					background: #F7F7F7;
					margin: auto px2vw(50);
					border-radius: px2vw(10);
					line-height: px2vw(54);

					text {
						display: inline-block;
						padding: px2vw(53) px2vw(47);
						font-size: px2vw(38);
						color: #666666;

						span {
							display: inline-block;
							text-indent: px2vw(76);
						}
					}
				}
			}

			::v-deep .van-cell {
				display: flex;
				align-items: center;
				height: px2vw(167);
			}

			.comment {
				box-sizing: border-box;
				background: #FFFFFF;
				overflow: hidden;
				border-radius: px2vw(20);
				margin-bottom: px2vw(30);

				.select {
					box-sizing: border-box;
					height: px2vw(167);
					display: flex;
					align-items: center;

					.right-arrow {
						width: 8px;
						height: 14px;
					}

					.down-arrow {
						width: px2vw(41);
						height: px2vw(24);
					}

					img {
						margin-right: px2vw(20);
					}

					text {
						font-size: px2vw(42);
						font-weight: bold;
						color: #666666;
						margin-right: auto;
					}

					.active {
						color: #3CDA68;
					}
				}

				.result {
					ul {
						display: flex;
						margin-bottom: px2vw(50);

						li {
							flex: 1;
							font-size: px2vw(42);
							font-weight: bold;
							color: #666666;

							span {
								color: #417ADC;
							}
						}
					}

					.content {
						height: px2vw(330);
						background: #F7F7F7;
						border-radius: px2vw(10);

						text {
							display: block;
							padding: px2vw(30);
							font-size: px2vw(38);
							color: #666666;
						}

						text:nth-child(1) {
							padding-bottom: 0;
						}

						text:nth-child(2) {
							line-height: px2vw(54);
						}
					}
				}

				.number {
					.number-top {
						position: relative;
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: px2vw(120);
						background: #F7F7F7;
						margin-top: px2vw(30);
						border-radius: px2vw(10);
						font-size: px2vw(40);
						font-weight: bold;
						color: #666666;

						.circle {
							margin-left: px2vw(90);
						}

						.circle::before {
							content: attr(content);
							display: inline-block;
							width: 18px;
							height: 18px;
							background: #417ADC;
							border-radius: 100%;
							color: #FFFFFF;
							text-align: center;
							line-height: 18px;
							position: absolute;
							left: px2vw(20);
							top: 50%;
							margin-top: -8px;
						}
					}

					.number-bottom {
						text {
							display: block;
							margin: px2vw(45) auto;
							font-size: px2vw(42);
							color: #666666;

							span {
								color: #9D9D9D;
							}
						}

						ul {
							display: flex;
							justify-content: flex-start;

							img {
								margin-right: px2vw(75);
							}
						}
					}
				}

				.Instructions {
					text {
						display: block;
						font-size: px2vw(42);
						color: #666666;
						margin-top: px2vw(25);
						margin-bottom: px2vw(40);
					}

					#area {
						width: px2vw(920);
						height: px2vw(280);
						background: #F7F7F7;
						border-radius: px2vw(10);
						font-size: px2vw(38);
						line-height: px2vw(100);
						text-indent: px2vw(45);
						margin-bottom: px2vw(50);
					}
				}

			}

			.execution-contnet {
				flex: 1;
				// overflow: scroll;
				overflow-x: hidden;
				overflow-y: auto;
			}
		}

		.van-preview-wrap {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;

			.van-swipe {
				width: 100%;
				height: 100%;
			
				.van-swipe-item {
					display: flex;
			
					img {
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
			}
		}

		.van-popup {
			background-color: rgba(0, 0, 0, 0.8);

			.van-cell {
				position: absolute;
				bottom: 0;
				border-top: 4px solid #eee;
				z-index: 3;
			}
		}
	}

	.img-icon {
		height: 15px;
		width: 15px;
	}

	/deep/ .van-radio__label {
		color: #666666;
		font-weight: normal;
	}

	.van-divider {
		margin: 0 auto px2vw(50);
	}
</style>
